<style type="text/css">
.mbox_top, .mbox_con, .mbox_bot {
    height: 20px;
    width: 413px;
}
.mbox_con {
    height: auto;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 20px;
    width: 363px;
}
.mbox_con .close {
    float: right;
    height: 15px;
    padding-right: 3px;
    padding-top: 3px;
    width: 15px;
}
.mbox_con .close a {
    display: block;
    height: 15px;
    width: 15px;
}
.mbox_con .close a:hover {
    background-position: right -500px;
}
.mbox_con .item_box .item_pic {
    border: 1px solid #B2B2B2;
    float: left;
    height: 128px;
    width: 128px;
}
.mbox_con .item_box .item_pic img {
    height: 128px;
    width: 128px;
}
.mbox_con .item_box .item_txt {
    float: left;
    font-size: 13px;
    font-weight: bold;
    padding-left: 10px;
    width: 350px;
}
.mbox_con .item_box .item_txt p {
    padding-bottom: 5px;
    padding-top: 5px;
}
.mbox_con .item_box .item_txt .i_title {
    font-size: 16px;
}
.mbox_con .item_box .item_txt strong {
    color: #3D3D3D;
}
.mbox_con .item_box .item_txt a {
    color: #E37437;
}
.mbox_con .item_box .item_txt span {
    color: #5AA0C0;
    cursor: pointer;
}
.mbox_con .item_box .item_txt span a {
    color: #5AA0C0;
    cursor: pointer;
}
</style>


<div id="fb-root"></div>
<!-- facebook : share message -->
	<div class="clear"></div>
	<div class="mbox_top"></div>
	<div class="mbox_con">
    <div class="item_box" style="position: relative;">
    	<div id="loading_block" style="z-index: 99; position:absolute; left:160px; top:110px; display:none; ">
			<img alt="loading" src="<?php echo $img_url ?>loading.gif">
		</div>
	    <div class="item_txt">
	    	<div id="jfmfs-container"></div>
			<div class="clear"></div>
			<script>
			$("#jfmfs-container").jfmfs();
			function getCheckedFriends(){
				var friendSelector  = $("#jfmfs-container").data('jfmfs');
				var selectedFriends = friendSelector.getSelectedIds();
				return selectedFriends;
			}
			</script>
			<div id="formError" style="color:red;"></div>
		    <a onclick="publishOnWall()" style="cursor:pointer;">Share</a>
		    or
		    <a onclick="cancelShareWithFriend()" style="cursor:pointer;">Cancel</a>
		</div>
		<div class="clear"></div>
	</div>
	</div>
	<div class="mbox_bot"></div>

<script type="text/javascript">
function publishOnWall(){
	var friends = getCheckedFriends();
	if(friends!=''){
		$('#formError').html('');
		var message = $('#message').html();
		var data = "friends="+friends+"&message="+message+"&js_token="+"<?php echo $js_token; ?>";
		var url = '<?php echo url('user/publishonwall'); ?>';
		$('#loading_block').show();
		$.ajax({
			type: 'POST',
			url: url,
			data: data,
			success: function(data){
				$('#loading_block').hide();
				if(data == 'true'){
					alert('Successfully shared.');
					//cancelShareWithFriend();
					//window.location.href = "<?php echo url('user/step3'); ?>";
				}else{
					//$('#formError').html('Error occurs.');
					$('#formError').html(data);
				}
			},
			dataType: 'html'
		});
	}else{
		$('#formError').html('You need to share with one friend at least.');
	}
}
function cancelShareWithFriend(){
	$("#shareToFacebook").html('');
	$("#shareToFacebook").hide();
	$("#directlygetfriends").hide();
//	FB.logout(function() {
//		  // user is now logged out
//	});
}
</script>